<template>
	<view class="overall">
		<view class="main">
			<ul class="nav">
				<li v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index)'>
					{{item.name}} 
				</li>
			</ul>
			
			<view v-show = 'menuIndex == 0'><!--此处可以换成子组件-->
				<mais :jdata="lists" :noMore="noMore"></mais>
			</view>

			<view v-show = 'menuIndex == 1'><!--此处可以换成子组件-->
				<issue :jdata="lists_two" ></issue>
			</view>

			<view v-show = 'menuIndex == 2'><!--此处可以换成子组件-->
				<mais :jdata="lists_three" :noMore="noMore"></mais>
			</view>
		</view>
		
		<view class="bottom"></view>
		<tabBar></tabBar>
	</view>
</template>

<script>

	import Mais from 'pages/index/transmit/Mais';
	import Issue from 'pages/index/transmit/Issue';
	import Cargo from 'pages/index/cargo/Cargo'
	import tabBar from '@/components/tabBar/tabBar.vue'

	export default {
		components: {
			Mais,
			Issue,
			Cargo,
			tabBar
		},
		
		data() {
			return {	
        		menuIndex:0,
				navList:[
					{name:"房象传媒"},
					{name:"买房问问"},
					{name:"房象干货"},
				],	
				pageCode:2,//当前页
				TotalPage:1,//总页数
				lists:{},
				lists_two:{},
				lists_three:{},
				noMore:0,//没有更多 0=不显示，1=显示
			}
		},
		onLoad(e) {
			if(e.type == undefined){
				this.menuIndex = 0;
			}else{
				this.menuIndex = e.type;
			}
			this.initData(0);
		},
		onReachBottom(e) {
			// console.log('触底加载更多');
			this.initData(1);
			
		},
		methods: {
			initData(is_loading){
				let _this = this;
				// console.log(this.menuIndex);
				// console.log(is_loading);
				this.$api.getNews({
						is_loading:is_loading,
						type:_this.menuIndex,
						page:_this.pageCode
					},
					res => {
						if(is_loading == 1){
							//加载
							if(res.length <= 0){
								_this.noMore = 1;
							}
							if(_this.menuIndex == 0){
								if(_this.pageCode <= _this.TotalPage){
									// console.log(res);
									for(let i=0;i<res.length;i++){
										_this.lists.push(res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
									
								}
							}
							if(_this.menuIndex == 1){
								if(_this.pageCode <= _this.TotalPage){
									for(let i=0;i<res.res.length;i++){
										_this.lists_two.push(res.res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
								}
							}
							
							if(_this.menuIndex == 2){
								if(_this.pageCode <= _this.TotalPage){
									// console.log(res);
									for(let i=0;i<res.length;i++){
										_this.lists_three.push(res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
									
								}
							}
						}else{
							console.log(res);
							if(_this.menuIndex == 0){
								this.lists = res.lists;
							}
							if(_this.menuIndex == 1){
								this.lists_two = res.lists.res;
							}
							if(_this.menuIndex == 2){
								this.lists_three = res.lists;
								console.log(res);
							}
							
							this.TotalPage = res.TotalPage;
						}
					}
				);
			},
			
			menuShow (index) {
				this.menuIndex = index;
				this.pageCode = 2;
				this.initData(0);
			}
		},
	}
</script>

<style scoped>
	*{
		list-style: none;
		padding: 0 ;
		margin: 0;
	}
	.overall{
		padding: 0 40rpx 40rpx;
		margin-bottom: 40rpx;
		background: #fff;
	}
	.main>ul{
		width: 600rpx;
		display: flex;
		flex-wrap: nowrap;
		margin: 0 auto;
		padding-bottom: 10rpx;
	}
	.main>ul>li{
		height: 74rpx;
		width: 200rpx;
		text-align: center;
		line-height: 74rpx;
		color: #333;
		font-size: 30rpx;
		font-weight: 550;
	}
	.active{	
		border-bottom: 6rpx solid  #13c3c3;
		color: #13c3c3;
	}
	
	.bottom{
		height: 80rpx;
	}
</style>
